<script lang="ts">
import { defineComponent, reactive, ref, useAttrs } from 'vue';
import { NDataTable,NSpin,NModal } from 'naive-ui';
import { associationColumns } from './associationColumns';
import { RulesService } from '@/api';


export default defineComponent({
  components: {
    NDataTable,
    NSpin,
    NModal,
  },
  setup() {
    const { associationState } = useAttrs() as { associationState: associationRuleState };

    const groupList = reactive([]) as RuleManegement[] | undefined;
    const loading = ref<boolean>(false);
    return {
      associationState,
      associationColumns,
      groupList,
      loading,
    };
  },
  watch: {
    'associationState.associationRuleShow': {
      handler(val){
        if (val) {
          this.loading = true;
          RulesService.page({}).then((res) => {
            if (res.success) {
              this.groupList = res.data;
              this.loading = false;
              console.log(res.data);
            }
            return res;
          });
        }
      },
    },
  },
  computed: {
    ModalAttrs() {
      return {
        title: `${this.associationState.scenarioName}的关联规则`,
        show: this.associationState.associationRuleShow ?? false,
        onNegativeClick: () => {
          this.associationState.associationRuleShow = false;
        },
        onPositiveClick: () => {
          this.associationState.associationRuleShow = false;
        },
      };
    },
  },
});
</script>

<template>
  <n-modal v-bind="ModalAttrs" class="association-rule">
    <n-spin :show="loading">
    <n-data-table :data="groupList" :columns="associationColumns()" />
  </n-spin>
  </n-modal>
</template>

<style lang="less">
.association-rule {
  width: 1000px !important;
  .n-form-item-blank {
    display: block !important;
  }
  svg {
    width: 20px;
    cursor: pointer;
  }
}
</style>
